<script setup lang="ts">
import { ref, Ref, reactive, toRefs } from 'vue'
import { useStore } from '../pinia/piniaIndex'

const store = useStore()
console.log(store)
</script>

<template>
    <h1>pinia状态管理</h1>
    <div>
        <span>getters(类似监听)</span>---<span>{{store.double}}</span>
        <el-divider />
        <span>访问其他getter</span>---<span>{{store.doubleDouble}}</span>
        <el-divider />
        <span>向getters传递参数写法(因为不好传参，名字就是个值，所以要返回一个函数)</span>---<span>{{store.getUserById(999)}}</span>
        <el-divider />
        <span>访问其他 Store 的getter</span>---<span>引入用就完事了</span>
    </div>
    <el-button link type="primary" size="small">
        <a href="https://pinia.web3doc.top/core-concepts/getters.html#%E5%B0%86%E5%8F%82%E6%95%B0%E4%BC%A0%E9%80%92%E7%BB%99-getter">彩笔传输门</a>
    </el-button>
    <div>
        <span @click="store.increment">Actions 相当于组件中的 methods(文字可点击)</span>---<span>{{store.counter}}</span>
        <el-divider />
        <span>actions 可以是异步的</span>---<span>案例目前不好写，后续可以用模拟数据实现</span>
        <el-divider />
    </div>
    <el-button link type="primary" size="small">
        <a href="https://pinia.web3doc.top/core-concepts/actions.html">彩笔传输门</a>
    </el-button>
    <el-divider />
    关于plugins和pinia-persistedstate-plugin持久化存储，简单使用了一下，有需要再跟进
    <router-link to="/piniaChildren">piniaChildren</router-link>
     <router-view></router-view>
</template>

<style scoped>
.el-button{margin-bottom: 70px;}
</style>
